<template>
  <transition name="fade">
    <div class="header-wrapper" v-show="visible">
      <div class="site-brand-wrapper"></div>
      <header class="header">
        <div class="logo">
          <router-link to="/">
            <h2>玉捷<sub>Blog</sub></h2>
          </router-link>
        </div>

      </header>
    </div>
  </transition>
</template>

<script>

  const OFFSET_HEIGHT = 50
  export default {
    name: 'HelloWorld',
    components: {  },
    data () {
      return {
        visible: true
      }
    },
    mounted () {
      window.addEventListener('scroll', this.handleScroll)
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleScroll () {
        let offsetTop = window.pageYOffset || document.documentElement.scrollTop
        this.visible = offsetTop < OFFSET_HEIGHT
      }
    }
  }
</script>

